.container {
  .buttonBox {
    width: $dynamicButtonsWidth;
    height: $dynamicButtonsHeight;
    cursor: pointer;
    position: relative;

    button {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      color: $buttonColor;
      background-color: transparent;
      border: 2px solid $buttonColor;
      border-radius: 6px;
      cursor: pointer;
    }

    svg {
      position: absolute;
      top: -10px;
      left: -10px;
      width: calc(100% + 20px);
      height: calc(100% + 20px);
      pointer-events: none;
      opacity: 0;

      .line1 {
        stroke-dasharray: 100;
        filter: url("#glow");
        stroke: #f6de8d;
        stroke-dashoffset: 0;
      }

      .line2 {
        stroke-dasharray: 100;
        filter: url("#glow");
        stroke: #6bfeff;
        stroke-dashoffset: 500;
      }
    }

    &:hover {
      svg {
        opacity: 1;
        transition: opacity 0.4s;
        transition-delay: 0.1s;
        .line1 {
          animation: spark1 3s linear infinite;
        }
        .line2 {
          animation: spark2 3s linear infinite;
        }
      }
    }
  }

  @keyframes spark1 {
    100% {
      stroke-dashoffset: -1000;
    }
  }

  @keyframes spark2 {
    100% {
      stroke-dashoffset: -500;
    }
  }
}
